<template>
	<view>
		<view class="giftCard-window" :class="isShow?'on':''">
			<view class='title'>礼品卡<text class='iconfont icon-guanbi' @tap='close'></text></view>
			<view style="width: 100%;background-color: #f3f3f3;height: 1px;"></view>
			<scroll-view scroll-y class='scrollview' v-if="datasource.length>0">
				<giftCardItem @giftChangeSelect="giftChangeSelect(index)" v-for="(item,index) in datasource"
					:key="index" :datasource="item" :isShowSelect="isSelect"></giftCardItem>
			</scroll-view>
			<!-- 暂无礼品卡 -->
			<view v-else style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin: 94upx 0 400upx 0;">
				<image src="../../static/images/nodata_icon.png" mode="widthFix" style="width: 240upx"></image>
				<text style="color: #999;font-size: 26upx;">暂无礼品卡可使用哦~</text>
			</view>
			<view class="bottom-gift-view">
				<view v-if="datasource.length>0" class="commint-gift-btn" @click="commintCrad">确定</view>
				<view v-else class="commint-gift-btn" @click="buyCard">购买礼品卡</view>
			</view>
		</view>
		<view class='mask' catchtouchmove="true" :hidden="!isShow" @tap='close'></view>
	</view>
</template>

<script>
	import giftCardItem from '@/components/giftCard-item/index.vue'
	import noData from '@/components/noData/index.vue'
	export default {
		components: {
			giftCardItem,
			noData
		},
		props: {
			isShow: {
				type: Boolean,
				default: false
			},
			datasource: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				isSelect: true
			}
		},
		methods: {
			close: function() {
				this.$emit('giftChangeClose');
			},
			giftChangeSelect(a) {
				let index = a
				this.$emit('giftChangeSelect', a);
			},
			buyCard(){
				this.$emit('buyCard');
			},
			commintCrad() {
				let cardInfo = {}
				this.datasource.forEach(tem => {
					if (tem.select) {
						cardInfo = tem
					}
				})
				if (!cardInfo.card_sn) {
					uni.showToast({
						title: '请选择礼品卡',
						icon: 'none',
						duration: 2000
					})
				}else{
					this.$emit('commintCard', cardInfo);
				}
			},
		}
	}
</script>

<style lang="scss">
	.giftCard-window {
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 102;
		transform: translate3d(0, 100%, 0);
		transition: all .3s cubic-bezier(.25, .5, .5, .9);
	}

	.giftCard-window.on {
		transform: translate3d(0, 0, 0);
	}

	.giftCard-window .title {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		height: 123rpx;
		line-height: 123rpx;
		position: relative;
	}

	.giftCard-window .title .iconfont {
		position: absolute;
		right: 30rpx;
		color: #8a8a8a;
		font-size: 35rpx;
	}

	.scrollview {
		width: 100%;
		height: 632upx;
		padding-bottom: 118upx;
	}

	.bottom-gift-view {
		position: fixed;
		width: 100%;
		height: 98upx;
		left: 0;
		bottom: 0;
		background-color: #FFFFFF;
		z-index: 111;
		display: flex;
		align-items: center;
		justify-content: center;

		.commint-gift-btn {
			width: 692upx;
			height: 88upx;
			opacity: 1;
			background: linear-gradient(90deg, #00acfe 0%, #0aace0 100%);
			border-radius: 56upx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 32upx;
			font-weight: 500;
		}
	}

	// .giftCard-window .list .item {
	// 	margin-left: 30rpx;
	// 	padding-right: 30rpx;
	// 	border-bottom: 1px solid #eee;
	// 	height: 129rpx;
	// 	font-size: 25rpx;
	// 	color: #333;
	// }
</style>
